<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>
        人力资源管理系统
    </title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="/css/x-admin.css" media="all"/>
    <link rel="stylesheet" href="/css/bootstrap.css" media="all"/>
</head>
<body>
<style type="text/css">
    legend {
        display: block;
        width: 100px;
        border-bottom: 0px;
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }

    legend a {
        color: #666;
    }

    legend a:hover {
        text-decoration: none;
    }

    .layui-table {
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }
</style>
<div class="x-body">

    <div class="row">
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">
                    王二狗公司部门人员占比
                </div>
                <div class="panel-body">
                    <div class="echarts" id="area" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-6">

            <section class="panel">
                <div class="panel-heading">
                    月份薪资排名
                </div>
                <select class="text" name="myselect" id="myselect">
                    <option value="一月">一月</option>
                    <option value="二月">二月</option>
                    <option value="三月">三月</option>
                    <option value="四月">四月</option>
                    <option value="五月">五月</option>
                    <option value="六月">六月</option>
                    <option value="七月">七月</option>
                    <option value="八月">八月</option>
                    <option value="九月">九月</option>
                    <option value="十月">十月</option>
                    <option value="十一月">十一月</option>
                    <option value="十二月">十二月</option>

                </select>
                <div class="panel-body">
                    <div class="echarts" id="years" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>

    </div>
</div>

<script src="/js/layui.js" charset="utf-8"></script>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    const month = 10;
    $(function () {
        queryTopSalaryMonth(month);
        queryDept();
    });
    $("#myselect").change(function () {
        const opt = $("#myselect").val();

        if (opt === "一月") {
            queryTopSalaryMonth(1);
        } else if (opt === "二月") {
            queryTopSalaryMonth(2);
        } else if (opt === "三月") {
            queryTopSalaryMonth(3);
        } else if (opt === "四月") {
            queryTopSalaryMonth(4);
        } else if (opt === "五月") {
            queryTopSalaryMonth(5);
        } else if (opt === "六月") {
            queryTopSalaryMonth(6);
        } else if (opt === "七月") {
            queryTopSalaryMonth(7);
        } else if (opt === "八月") {
            queryTopSalaryMonth(8);
        } else if (opt === "九月") {
            queryTopSalaryMonth(9);
        } else if (opt === "十月") {
            queryTopSalaryMonth(10);
        } else if (opt === "十一月") {
            queryTopSalaryMonth(11);
        } else if (opt === "十二月") {
            queryTopSalaryMonth(12);
        }


    });

    function queryTopSalaryMonth(month) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('years'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '',
                subtext: '不分部门',
                x: 'center'
            },
            //color: ['#3398DB'],

            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: [],
                textStyle: {text: 20},

                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '薪资',
                itemStyle: {

                    normal: {

                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                        color: function (params) {

                            // build a color map as your need.

                            var colorList = [

                                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',

                                '#FE8463'

                            ];

                            return colorList[params.dataIndex]

                        },

                        //以下为是否显示，显示位置和显示格式的设置了

                        label: {

                            show: true,

                            position: 'top',

                            formatter: '{c}'

                            // formatter: '{c}\n{b}'

                        }

                    }

                },
                type: 'bar',
                barWidth: '60%',
                data: []
            }]
        };
        $.ajax({
            url: "/echarts/queryTopSalaryMonth",
            type: "get",
            // data:{"month":month},
            dataType: "json",
            success: function (data) {
                console.log(data[month + "月"]);
                const res = data[month + "月"];
                const carr = [];
                const zarr = [];
                for (let i = 0; i < res.length; i++) {
                    const c = res[i].name;
                    const z = res[i].value;
                    carr.push(c);
                    zarr.push(z);
                }
                option.title.text = month + "月薪资排行"
                option.series[0].data = zarr;
                option.xAxis[0].data = carr;


                myChart.setOption(option);
            }
        })
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function queryDept() {
        // 指定图表的配置项和数据
        const myChart = echarts.init(document.getElementById('area'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '王二狗公司部门人员占比',
                subtext: '人员在职总数',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            itemStyle: {

                normal: {

                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                    color: function (params) {

                        // build a color map as your need.

                        var colorList = [

                            '#f36f8a', '#B5C334', '#FCCE10', '#E87C25', '#27727B',

                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',

                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'

                        ];

                        return colorList[params.dataIndex]

                    },

                    //以下为是否显示，显示位置和显示格式的设置了

                    label: {

                        show: true,

                        position: 'top',

//                             formatter: '{c}'

                        formatter: '{b}\n{c}'

                    }

                }

            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['', 'JavaScript', 'MySQL', 'jQuery', 'CSS', 'MUI',]
            },
            series: [{

                name: '人员总数',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        $.ajax({
            url: "/echarts/queryDept",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data.data);
                option.series[0].data = data.data;
                var names = [];
                for (let i = 0; i < data.data.length; i++) {
                    names.push(data.data[i].name);
                }
                option.legend.data = names;
                myChart.setOption(option);
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //调用echarts的setOption方法来让图标生效
    window.addEventListener("resize", function () {
        myChart.resize();
    });
</script>

</body>
</html>